<template>
  <div class="app-container">
    <el-form label-width="100px">
      <el-form-item label="关键字">
        <el-input placeholder="根据编号搜索" v-model="queryParams.keyword"></el-input>
      </el-form-item>
      <el-form-item>
        <template>
          <el-button @click="handleDel()">清除</el-button>
          <el-button type="primary" @click="toEdit">查询</el-button>
        </template>
      </el-form-item>
    </el-form>
    <el-alert type="info" class="alert" :closable="false" show-icon>一共条数为{{total}}</el-alert>
    <el-table :data="Sublist" style="width: 100%">
      <el-table-column prop="id" label="编号">
      </el-table-column>
      <el-table-column prop="questionType" label="题型" :formatter="formType" />
      <el-table-column prop="questionIDs" label="题型编号">
        <template v-slot="{row}">
          <span v-for="(item,index) in row.questionIDs" :key="index">
            <a href="#" class="blue" @click="handle()">{{item.number}}</a>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="addTime" label="录入时间">
      </el-table-column>
      <el-table-column prop="totalSeconds" label="答题时间(s)">
      </el-table-column>
      <el-table-column prop="accuracyRate" label="正确率(%)">
      </el-table-column>
      <el-table-column prop="userName" label="录入人">
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{row}">
          <el-button type="danger" class="btu" icon="el-icon-delete" @click="handleOpen(row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="题目预览" :visible="showDialog" @close="handleClose()">
      <el-row type="flex" class="row-bg">
        <el-col :span="6">
          <div class="grid-content bg-purple">【题型】:</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">【编号】：</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">【难度】：</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">【标签】：</div>
        </el-col>
      </el-row>
      <el-row type="flex" class="row-bg">
        <el-col :span="6">
          <div class="grid-content bg-purple">【学科】：</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">【目录】：</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">【方向】：</div>
        </el-col>
      </el-row>
      <hr>
      <p>【题干】：</p>
      <div>选项：（以下选中的选项为正确答案）</div>
      <hr>
      <span>【参考答案】:</span>
      <el-button type="danger" @click="handleCheck()"> 视频答案预览</el-button>
      <div class="videos1" v-if="show">
        <video class="videos" src="../../assets/video.mp4" autoplay controls muted v-if="show"></video>
      </div>
      <hr>
      【答案解析】：
      <hr>
      【题目备注】：
      <div class="el-footer">
        <el-button @click="handleDeles()">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination :page-sizes="[2, 10, 20,50]" layout="sizes, prev, pager, next, jumper,total" :total="total" :current-page="queryParams.page" :page-size="queryParams.pagesize" @current-change="changePage" @size-change="sizeChange" />
  </div>
</template>
<script>
import { randoms, removeRandoms } from '../../api/hmmm/questions'
import { questionType } from '../../api//hmmm/constants'
export default {
  name: 'questionType',
  data () {
    return {

      questionType,
      // 视频控制
      show: false,
      // 题组列表
      Sublist: [],
      queryParams: {
        // 条数
        page: 1,
        pagesize: 10, // 页数
        // 查询参数
        keyword: ''
      },
      // 总数
      total: 0,
      // 弹窗标志位
      showDialog: false
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 判断题目类型
    formType (row) {
      const info = this.questionType.find(item => parseInt(item.value) === parseInt(row.questionType))
      if (info.value === 1) {
        return info.label
      } else if (info.value === 2) {
        return info.label
      } else if (info.value === 3) {
        return info.label
      } else {
        return '其他'
      }
    },
    // 获取组题数据
    async getList () {
      const ret = await randoms(this.queryParams)
      // console.log(ret)
      this.Sublist = ret.data.items
      this.total = ret.data.counts
    },
    // 弹窗显示
    handle () {
      this.showDialog = true
    },
    // 弹窗关闭
    handleClose () {
      this.showDialog = false
      this.show = false
    },
    // 弹窗关闭
    handleDeles () {
      this.showDialog = false
    },
    // 删除列表
    async handleOpen (id) {
      try {
        const ret = await this.$confirm('确认要删除该组题列表吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        // 点击了取消操作
        if (ret === 'cancel') return
        // 点击确定操作，调用接口
        const delRet = await removeRandoms({ id })
        if (delRet.status === 200) {
          // 删除成功，刷新列表
          this.getList()
          this.$message.success('删除组题成功')
        } else {
          // 删除失败
          this.$message.error(delRet.message)
        }
      } catch {
        this.$message.error('删除组题失败')
      }
    },
    // 获取查看的数据
    async toEdit () {
      // 查询的页数
      this.queryParams.page = 1
      this.getList(this.queryParams)

      // 拿到当前的id console.log(this.id)
      // const res = await randoms({ page: 1, pagesize: 99999999 })
      // console.log(res)
      // const num = res.data.items.find(item => item.id === this.id)
      // this.Sublist = []
      // this.Sublist.push(num)
    },
    // 清除编号
    handleDel () {
      this.queryParams.keyword = ''
    },
    // 控制视频
    handleCheck () {
      this.show = true
    },
    // 监听每页条数的变化刷新列表
    sizeChange (pagesize) {
      this.queryParams.pagesize = pagesize
      this.getList()
    },
    // 监听页码的切换操作
    changePage (page) {
      // page表示切换后最新的页码
      this.queryParams.page = page
      this.getList()
    }
  }
}
</script>

<style scoped lang='scss'>
.app-container {
  margin: 20px;
  background: #fff;
  .el-form {
    display: flex;
    justify-content: space-between;
    .el-input {
      width: 318px;
    }
    .el-button {
      flex: 1;
    }
  }
  .el-dialog {
    width: 800px;
    height: 700px;
    font-size: 18px;
    color: #fff;
    background-color: #409eff;
  }
  .el-footer {
    display: flex;
    justify-content: flex-end;
    .el-button {
      color: #fff;
      background-color: #409eff;
    }
  }
  .row-bg {
    padding: 0 20px 10px;
  }
  .el- .info {
    background-color: #f4f4f5;
    color: #909399;
    font-size: 12px;
  }
  .videos1 {
    width: 400px;
    height: 300px;
    .videos {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
